<template>
  <ElScrollbar class="w-[100%] h-[100vh]">
    <iframe
    width="100%"
    style="min-height: 900px"
    src="http://192.168.0.164:7860/?__theme=dark"
  ></iframe>
  </ElScrollbar>
  <!-- <div class="SDprofession">
        <div class="flex">
            <div class="ckpt-container common">
                <sd-select v-model="drawForm.model" :isGroup="true" :model-list="yjData"
                    title="Stable Diffusion 模型(ckpt)">
                </sd-select>
            </div>
            <div class="ckpt-container common ml-[10px]">
                <sd-select v-model="drawForm.model" :isGroup="true" :model-list="yjData" title="外挂 VAE 模型">
                </sd-select>

            </div>
            <div class="ckpt-container common ml-[10px]">
                <sd-slider v-model="drawForm.clip" :min="1" :max="12" title="CLIP 终止层数"></sd-slider>
            </div>
        </div>
        <el-tabs class="tabs" type="border-card">
            <el-tab-pane label="文生图">
                <div class="textToPicturePane">
                    <div class="textToPicturePaneLeft">
                        <div class="common">
                           
                            <sd-prompt v-model="drawForm.prompt" placeholder="提示词(按Ctr+Enter或Alt+Enter生成)Prompt"
                                title="提示词(Prompt)" tip="将按照提示词绘制画面"></sd-prompt>
                        </div>
                        <div class="common">
                          
                            <sd-prompt v-model="drawForm.negativePrompt"
                                placeholder="反向提示词(按Ctrl+Enter或Alt+Enter生成)Negative prom" title="反向提示词(Negative prompt)"
                                tip="不会画出描述的画面"></sd-prompt>
                        </div>
                    </div>
                    <div class="textToPicturePaneRight">
                        <el-button class="textToPicturePaneButton" @click="generate" type="primary">生成<el-icon
                                class="ml-[3px]">
                                <Right />
                            </el-icon></el-button>
                    </div>
                    <div class="setting">

                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图生图">
                <div class="textToPicturePane">
                    <div class="textToPicturePaneLeft">
                        <div class="common">
                            
                            <sd-prompt v-model="drawForm.prompt" placeholder="提示词(按Ctr+Enter或Alt+Enter生成)Prompt"
                                title="提示词(Prompt)" tip="将按照提示词绘制画面"></sd-prompt>
                        </div>
                        <div class="common">
                            
                            <sd-prompt v-model="drawForm.negativePrompt"
                                placeholder="反向提示词(按Ctrl+Enter或Alt+Enter生成)Negative prom" title="反向提示词(Negative prompt)"
                                tip="不会画出描述的画面"></sd-prompt>
                        </div>
                    </div>
                    <div class="textToPicturePaneRight">
                        <el-button class="textToPicturePaneButton" @click="generate" type="primary">生成<el-icon
                                class="ml-[3px]">
                                <Right />
                            </el-icon></el-button>
                    </div>
                    <div class="setting">

                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图像信息">
            </el-tab-pane>

        </el-tabs>
        <div class="settings">
            <div class="divideLine"></div>
            <el-tabs class="mt-[20px]" type="border-card">
                <el-tab-pane label="生成">
                    <div class="settingContent flex">
                        <div class="settingContentLeft flex-1">
                            <div class="mt-[10px]">
                                <sd-slider title="采样步数(Steps)"></sd-slider>
                            </div>
                            <div>
                                <div class="mb-[10px]">采样方法(Sampler)</div>
                                <el-radio-group v-model="drawForm.sampler" class="mr-4">
                                    <el-radio class="mb-2" border v-for="item in samplerData" :key="item.name"
                                        :label="item.name" size="large">{{ item.name }}</el-radio>
                                </el-radio-group>

                            </div>
                            <el-collapse style="background:red">
                                <el-collapse-item title="高分辨率修复 (Hires. fix)" name="Hires.fix">
                                    <div class="flex">
                                        <div class="flex-1">
                                            <sd-select title="放大算法"></sd-select>
                                        </div>
                                        <div class="flex-1">
                                            <sd-slider :max="150" title="高分迭代步数"></sd-slider>
                                        </div>
                                        <div class="flex-1"><sd-slider :step="0.01" :max="1" title="重绘幅度"></sd-slider>
                                        </div>

                                    </div>
                                    <div class="flex">
                                        <div class="flex-1">
                                            <sd-slider :min="1" :max="150" title="放大倍数"></sd-slider>
                                        </div>
                                        <div class="flex-1">
                                            <sd-slider :max="2048" title="将宽度调整为"></sd-slider>
                                        </div>
                                        <div class="flex-1"><sd-slider :max="2048" title="将高度调整为"></sd-slider></div>

                                    </div>
                                </el-collapse-item>
                                <el-collapse-item title="Refiner" name="Refiner">
                                    <div class="flex">
                                        <div class="flex-1">
                                            <sd-select v-model="drawForm.model" :isGroup="true" :model-list="yjData"
                                                title="模型">
                                            </sd-select>
                                        </div>
                                        <div class="flex-1">
                                            <sd-slider :min="0.01" :step="0.01" :max="1" title="切换时机"></sd-slider>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                            <div class="flex  mt-[10px]">
                                <div class="flex-1 ">
                                    <sd-slider v-model="drawForm.width" title="宽度"></sd-slider>
                                </div>
                                <div class="flex-1 ml-[10px]">
                                    <sd-slider title="生成次数"></sd-slider>
                                </div>
                            </div>
                            <div class="flex mt-[10px]">
                                <div class="flex-1 ">
                                    <sd-slider title="高度"></sd-slider>
                                </div>
                                <div class="flex-1 ml-[10px]">
                                    <sd-slider title="每日数量"></sd-slider>
                                </div>
                            </div>
                            <div class="mt-[10px]">
                                <sd-slider title="提示引导词数"></sd-slider>
                            </div>
                            <div class="mt-[10px]">
                                <sd-select title="随机数种子" placeholder="-1"></sd-select>
                            </div>
                            <div class="mt-[10px]">
                                <sd-select title="脚本" placeholder="None"></sd-select>
                            </div>
                        </div>
                        <div class="settingContentRight flex-1"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="嵌入式 (T.I. Embedding)">Config</el-tab-pane>
                <el-tab-pane label="超网络 (Hypernetworks)">超网络 (Hypernetworks)</el-tab-pane>
                <el-tab-pane label="模型">模型</el-tab-pane>
            </el-tabs>
        </div>
    </div> -->
</template>

<script setup lang="ts">
// import SdSelect from "../component/drawing-control/sd-select.vue";
// import SdPrompt from "../component/drawing-control/sd-prompt.vue";
// import SdSlider from "../component/drawing-control/sd-slider.vue";
// import { Right } from "@element-plus/icons-vue";
//import { yjStyleSelector } from "~/api/drawing";
//import { samplersList } from "~/api/sd_drawing";
// const drawForm = reactive({
//   clip: 3,
// } as any);
// const setting = ref("Generation");
// const generate = () => {
//   console.log("form======== ", drawForm);
// };
// //ckpt模型
// const yjData = ref([] as any);
// //sampler
// const samplerData = ref([] as any);
// const getYjSdData = async () => {
//   try {
//     const data = await yjStyleSelector();
//     for (const i in data) {
//       if (data[i]?.length > 0) {
//         yjData.value.push({
//           label: data[i][0]?.group_name,
//           options: data[i].map((t) => {
//             return { ...t, label: t.text, value: t.value };
//           }),
//         });
//       }
//     }
//   } catch (e) {
//     console.log("errror", e);
//   }
// };
// const getSamplersList = async () => {
//   const xhr = new XMLHttpRequest();
//   xhr.open("GET", "http://192.168.0.164:7860/sdapi/v1/samplers");
//   xhr.setRequestHeader("Content-type", "application/json");
//   xhr.onload = function () {
//     if (this.status === 200) {
//       samplerData.value = JSON.parse(this.response);
//       console.log("samplerData.value", samplerData.value);
//     }
//   };
//   xhr.send();
// };
// getYjSdData();
// getSamplersList();
</script>

<style lang="scss" scoped>
.left-side {
  height: 100%;

  &__footer {
    .submit-btn {
      font-size: 16px;
      height: 52px !important;
      border-radius: 10px !important;
      background: linear-gradient(
        90deg,
        var(--gradient-1) 0%,
        var(--gradient-2) 100%
      );
      @apply text-btn-text;
    }
  }
}

.ckpt-container {
  margin-bottom: 10px;
  width: 460px;
  height: 90px;
  padding: 12px 10px;
}

.common {
  background: #262932;
  border-radius: 8px 8px 8px 8px;
}

.SDprofession {
  width: 100%;

  .tabs {
    width: 100%;

    .textToPicturePane {
      display: flex;

      .textToPicturePaneLeft {
        flex: 1;
      }

      .textToPicturePaneRight {
        width: 456px;

        .textToPicturePaneButton {
          margin-top: 45px;
          margin-left: 20px;
          width: 436px;
          height: 82px;
          background: #f86e07;
          border-radius: 8px 8px 8px 8px;
        }
      }
    }
  }

  :deep(.el-tabs) {
    border: none;
  }

  :deep(.el-tabs__header) {
    background: #121318;
    border: none;

    .el-tabs__item {
      border: none;
    }

    .is-active {
      background: #262932;
    }
  }

  :deep(.el-tabs__content) {
    background: #262932;
  }

  .divideLine {
    margin: 0px 10px auto;
    width: 100%;
    height: 0px;
    border: 1px solid #595c61;
  }

  .settings {
    background: #262932;
    padding: 10px 10px;

    .tags {
      width: 800px;
      height: 60px;
      border-radius: 0px 0px 0px 0px;
      align-items: center;
    }

    .settingContentRight {
      margin-left: 20px;
      background: #262932;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #595c61;
    }
  }
}

// 上传参考图
.upload-view-box {
  position: relative;
  width: 428px;
  height: 124px;
  border-radius: 8px 8px 8px 8px;
  border-right: 4px;
  border: 1px dashed #dcdfe6;

  .upload-view-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .upload-clear {
    position: absolute;
    right: 20px;
    top: 14px;
    cursor: pointer;
  }
}

.upload-view-box:hover .upload-view-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
